<template>
  <MenuPage title=" ">
      <template slot="search">
        <Button type="primary" ghost class="md-add-jh" @click="openModal(null,'add')">创建资产类型</Button>
        <Input v-model.trim="queryPage.name"  clearable placeholder="资产类型名称" @on-change="queryList" style="width: 180px;margin-left: 15px" />
      </template>
      <template slot="content">
        <section v-if="treeData.length" class="content tree-content">
          <Tree :data="pageTreeData" :render="renderContent" class="tree"></Tree>
        </section>
        <section class="foot mgTop" v-show="total">
          <Page :total="total" :page-size="queryPage.pageSize" :current="queryPage.pageIndex" show-elevator show-total @on-change="changePage" />
        </section>
        <NoData v-if="treeData.length==0" :loading="loading"></NoData>
      </template>
      <edit ref="addProductTypeModal" @ok="handleOk" title="资产类型"></edit>
  </MenuPage>
</template>
<script>
import edit from './addProductTypeModal.vue'
import {queryProductType,deleteProductType} from './api/productType.js'
import {mapGetters,mapMutations} from 'vuex'
import pageTitle from '@/mixin/pageTitle';
export default {
    name:'AssetType',
    mixins:[pageTitle],
        components:{edit},
        data () {
            return {
                queryPage:{
                  name:'',
                  pageIndex:1,
                  pageSize:10
                },
                loading:false,
                treeData:[],
                total:0,
                configList:{
                    freshList:this.queryList,
                    queryForm:[

                    {id:'add',type:'button',icon:'ios-add',text:'创建产品类型',fn:this.openModal},
                    {id:'name',type:'input',placeholder:'请输入类型名称',width:180},
                    {id:'fresh',type:'button',icon:'ios-refresh',fn:this.queryList},
                    ],
                    treeData:[],
                    renderContent:this.renderContent
                },
                productTypeData:[],
                buttonProps: {
                    type: 'default',
                    size: 'small',
                }
            }
        },
        computed:{
          pageTreeData(){
            return this.treeData.slice((this.queryPage.pageIndex-1)*this.queryPage.pageSize,this.queryPage.pageIndex*this.queryPage.pageSize);
          },
        },
        watch:{
          pageTreeData(val){
            if(val.length === 0){
              return
            }
            val.forEach(item => {
              this.$set(item,'selected',false)
              this.$set(item,'expand',false)
            })
            this.$set(val[0],'selected',true);
            this.expandFiirst(val)
          }
        },
        mounted(){
          this.loading = true
          this.queryList();
        },
        methods: {
            handleOk(type){
              if(type === 'add'){
                this.queryPage.pageIndex = 1;
              }
              this.queryList()
            },
            queryList(){
                queryProductType(this.queryPage).then(res=>{
                    if(res.code==1){
                      this.treeData = res.data;
                      this.total = res.data.length;
                      this.loading = false;
                    }
                })
            },
            openModal(data,type){
                this.$refs.addProductTypeModal.openModal(data,type);
            },
            changePage(page){
              this.queryPage.pageIndex = page;
            },
            expandFiirst(list){
              let _this = this;
              if(list[0]){
                  function iterationTree(obj) {
                    _this.$set(obj,'expand',true)
                      if (obj.children && obj.children.length) {
                      obj.children.forEach(item => {
                      iterationTree(item);
                    })
                  }
                }
                iterationTree(list[0]);
              }
              return list;
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline',
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span',{

                                class:{
                                'tree-title':true
                            },

                        }, data.name)
                    ]),
                    h('p',{
                    attrs:{
                            title:data.description||'-'
                        },
                    style:{
                          float:'right',
                          display:'inline-block',
                          width:'300px',
                          'margin-right':'16px'
                      }
                  },[
                  h('span',{
                        style:{
                            display:'inline-block',
                            width:'300px',
                            overflow:'hidden',
                            'text-overflow': 'ellipsis',
                            'white-space': 'nowrap'
                        }
                    },`描述:${data.description||'-'}`)
                  ]),
                    // h('p',{

                    //     style:{
                    //         // float:'right',
                    //         // display:'inline-block',
                    //         // width:'400px'

                    //     }
                    // },data.description||'-'),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px',
                            position:'relative',
                            'z-index':10,
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    this.openModal(data,'add') }
                            },
                            attrs:{
                                id:'tree'+data.name
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-brush-outline'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    this.openModal(data,'update') }
                            },
                            attrs:{
                                id:'treeModify'+data.name
                            }
                        }),
                        h('Poptip',{
                            props: {
                                confirm: true,
                                'ok-text': "确定",
                                'cancel-text': "取消",
                                type: 'error',
                                size: 'large',
                                title: '你确定要删除吗?',
                                transfer:true
                            },
                            on: {
                                'on-ok': () => {
                                    this.delItem(data)
                                }
                            },
                            attrs:{
                                id:'treePoptip'+data.name
                            }
                        },[
                            h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove'
                            }),
                            attrs:{
                              id:'treeDelete'+data.name
                            }
                            }),
                        ])
                    ]),

                ]);
            },
            delItem(data){
                deleteProductType(data.id).then(res=>{
                    if(res.code==1){
                        this.$Message.info('删除成功');
                        this.queryList()
                    }else{
                        this.$Message.error(res.message);
                    }
                })
            }
        }
    }
</script>

<style scoped>
.treeWarp{
    width:100%;
}
.tree /deep/ .ivu-tree-title{
    width: 100%;
    color:var(--default-color);
}
.tree /deep/  .ivu-tree-title:hover{
    background: var(--table-tr-hover-color);
}
.tree /deep/  .tree-title{
    position: absolute;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree /deep/ .ivu-tree-title-selected, .ivu-tree-title-selected:hover{
    background-color: transparent;
    font-size: 16px;
}
</style>
